import React, { Component } from 'react'
import FormWidget from '.'
import { getTemplateByCode, saveSchema } from '@/service/schema/schemaService'
import consoleUtil from '@/utils/consoleUtil'
import { Modal, Spin, message } from 'antd'
import { getDocumentsByCondition } from '@/service/document/documentService'
import JsonEditor from '../JsonEditor'
import './index.css'

/**
 * 表单设计器
 * 
 */
class FormBuilder extends Component {

    constructor(props) {
        super(props)
        this.state = {
            builderType: null, //创建类型 new modify
            modalProps: { //modal的属性
                visible: false
            },
            id: null, //表单数据的id
            code: null, //表单的code
            pageKey: new Date().getTime(),
            formJsonValue: '{}', //表单配置
            loading: true
        }
    }

    /**
     * 组件挂载后异步执行的方法
     * 该方法根据props中的code值判断是新建还是修改表单模板
     * 如果code不存在，则表示需要新建表单模板；如果code存在，则根据code获取表单模板并进行修改
     */
    async componentDidMount() {
        //code不存在表示新增
        if (!this.props.code) {
            this.setState({
                builderType: 'new',
                modalProps: { visible: true },
                modifyKey: new Date().getTime(),
                loading: false
            })
        } else {
            let template = {}
            try {
                // 根据code异步获取表单模板
                template = await getTemplateByCode(this.props.code)
            } catch (e) {
                // 如果获取表单模板失败，则记录错误信息
                consoleUtil.error('获取表单模板失败', e)
                return
            }

            // 设置组件状态为修改模式，并更新表单模板的相关信息
            this.setState({
                builderType: 'modify',
                code: this.props.code,
                formJsonValue: JSON.stringify(template.content),
                id: template.id,
                loading: false
            })
        }
    }

    /**
     * 渲染组件
     * 根据当前状态决定渲染加载中的旋转器、新建表单的模态框还是编辑表单
     */
    render() {
        // 如果正在加载或未确定构建类型，则显示加载中的旋转器
        if (this.state.loading || !this.state.builderType) return <Spin />

        // 如果构建类型为新建，则显示新建表单的模态框
        if (this.state.builderType === 'new') {
            return (
                <Modal
                    title='新建表单'
                    open={this.state.modalProps.visible}
                    onCancel={async () => {
                        // 关闭模态框并调用父组件的取消函数（如果存在）
                        this.setState({
                            modalProps: { visible: false }
                        })
                        typeof this.props.onCancel === 'function' && await this.props.onCancel()
                    }}
                    width='60%'
                    footer={null}
                    destroyOnClose={true}
                >
                    <FormWidget
                        code='formSchemaInfo'
                        serviceName='blog'
                        collectionName='system_schema_config'
                        initFormData={{ content: this.state.formJsonValue }}
                        validate={async (formData) => {
                            const response = await getDocumentsByCondition({
                                serviceName: 'blog',
                                collectionName: 'system_schema_config',
                                searchFactory: [
                                    {
                                        fieldName: 'code',
                                        fieldValue: formData.code,
                                        operate: 'eq'
                                    }
                                ]
                            })
                            if (response && Array.isArray(response.data) && response.data.length > 0) {
                                message.warning(`表单标识[${formData.code}]已存在`)
                                return false
                            }
                            return true
                        }}
                        saveHandler={async () => {
                            // 校验表单数据
                            if (!await this.newEditFormRef.validateFormData()) {
                                return false
                            }
                            // 保存表单数据
                            if (await saveSchema(this.newEditFormRef.state.formData)) {
                                message.success('保存成功')
                                this.setState({ modalProps: { visible: false } })
                                typeof this.props.onCancel === 'function' && await this.props.onCancel()
                            } else {
                                message.error('保存失败')
                            }
                        }}
                        ref={ref => this.newEditFormRef = ref}
                    />
                </Modal>
            )
        } else {
            // 如果构建类型不是新建，则显示编辑表单
            return (
                <div>
                    <FormWidget
                        key={this.state.modifyKey}
                        code='formSchemaInfo'
                        id={this.state.id}
                        refData={{ disabled: true }}
                        serviceName='blog'
                        collectionName='system_schema_config'
                        saveHandler={async () => {
                            // 校验表单数据
                            if (!await this.modifyEditFormRef.validateFormData()) {
                                return false
                            }
                            const formData = {...this.modifyEditFormRef.state.formData, content: this.state.formJsonValue}
                            // 保存表单数据
                            if (await saveSchema(formData)) {
                                this.setState({ modifyKey: new Date().getTime() })
                                message.success('保存成功')
                            } else {
                                message.error('保存失败')
                            }
                        }}
                        ref={ref => this.modifyEditFormRef = ref}
                    />
                    <div className='form-builder-json-editor'>
                        <JsonEditor
                            value={this.state.formJsonValue}
                            onChange={(value) => {
                                this.setState({ formJsonValue: value })
                            }}
                        />
                    </div>
                </div>
            )
        }
    }
}

export default FormBuilder
